<template>
  <div class="page-view">
    <!-- Header -->
    <div class="header-section" v-if="showHeader">
      <slot name="header">
        <h2 v-if="title">{{ title }}</h2>
        <div v-else></div>
        <div></div>
      </slot>
    </div>

    <!-- Search / Filters -->
    <div class="search-section" v-if="$slots.search">
      <slot name="search" />
    </div>

    <!-- Main content -->
    <component :is="useCard ? 'el-card' : 'div'" :class="useCard ? 'table-card' : ''">
      <slot />
      <!-- Footer / Pagination -->
      <div class="pagination-section" v-if="$slots.footer">
        <slot name="footer" />
      </div>
    </component>
  </div>
</template>

<script lang="ts" setup>
/**
 * PageContainer
 * 统一页面骨架：header/search/content/footer
 * - 使用全局样式类（由 view-standard.scss 提供）
 * 插槽：
 *  - header: 顶部标题与操作区（默认显示 title）
 *  - search: 搜索筛选区域
 *  - default: 主内容区域（表格等）
 *  - footer: 底部区域（分页等），在 useCard 时自动应用 .pagination-section
 */
interface Props {
  title?: string;
  showHeader?: boolean;
  useCard?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  title: "",
  showHeader: true,
  useCard: false,
});
</script>

<style scoped>
/* 样式由全局 view-standard.scss 提供，此处不再重复定义 */
</style>
